<template>
  <div class="buttongroup">
    <slot></slot>
  </div>
</template>
<script>
export default {
  mounted(){
    //console.log(this.$children) //获得孩子组件实例
    //console.log(this.$el)//获得元素
    //console.log(this.$el.children) //获得元素的子元素
    
  }
};
</script>
<style lang='scss'>
.buttongroup {
  display: inline-flex;
  vertical-align: middle;
  > .g-button {
    border-radius: 0;
    margin-right: -1px;
    &:first-child {
      border-top-left-radius: var(--button-radius);
      border-bottom-left-radius: var(--button-radius);
    }
    &:last-child {
      border-top-right-radius: var(--button-radius);
      border-bottom-right-radius: var(--button-radius);
    }
    &:hover{
      position: relative;
    }
  }
}
</style>